import { Component, AnimationTransitionEvent, ChangeDetectorRef } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { BaseComponent } from '../../../adep/components';
import { indexButtonAnimation } from '../../../animations/custom.animation';
import { BankChartPage } from '../bank-chart/bank-chart';

@Component({
  selector: 'page-bank-index',
  templateUrl: 'bank-index.html',
  animations: [
    indexButtonAnimation
  ]
})
export class BankIndexPage extends BaseComponent {

  private _buttonAnimationState = 'normal';

  public get buttonAnimationState() {
    console.log('=========');
    return this._buttonAnimationState;
  }

  public showButton = true;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private changeDetector: ChangeDetectorRef
  ) {
    super()
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad BankIndexPage');

    // 使用自定义数组
    const myArray: ReadonlyStringArray = ["Alice", "Bob"];
    console.log(myArray);
  }

  public pushPage() {
      this._buttonAnimationState = 'clicked'; 
  }

  public animationDone(event: AnimationTransitionEvent) {
    // console.log(event);
    if (event.fromState !== 'void') {
      // 动画在没有state的时候, state是void, 第一次进行赋值的时候, 会从void变为第一次的赋值, 这个时候不做动画
      this.navCtrl.setRoot(BankChartPage);
    }
  }
}

// 自定义数组
interface ReadonlyStringArray {
  readonly [index: number]: string;
}
